<template>
    <!-- <div class="chart-box"></div> -->
    <swiper :options="swiperOptions" class="chart-box">
        <swiper-slide v-for="(cur, i) in 5" :key="i" class="swiper-item">
            <div>
                <div class="img-card">
                    <img src="@/assets/cy_img.png" alt="">
                    <div>全国维护妇女儿童权益先进集体</div>
                </div>
                <div class="img-card">
                    <img src="@/assets/cy_img.png" alt="">
                    <div>人民法院党建工作先进集体</div>
                </div>
            </div>
        </swiper-slide>
    </swiper>
</template>

<script>

export default {
    name: "HonorCom",
    data() {
        return {
            swiperOptions: {
                loop: true,
                direction: 'vertical',
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false
                }
            },
        }
    },
    mounted() {
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 225px;

    .swiper-item {
        display: flex;
        align-items: flex-end;

        &>div {
            display: flex;
            height: 200px;
            gap: 40px;
        }
    }

    .img-card {
        flex: 1;
        font-size: 16px;
        text-align: center;
        color: #FFFFFF;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        div {
            white-space: nowrap;
            width: 220px;
            margin: 20px 0 0;
            text-align: center;
        }

        img {
            width: 220px;
        }
    }
}
</style>